<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      width: 500px;
      text-align: center;
      margin: 50px auto;
    }

    form {
      border: 1px solid #333;
      padding: 20px;
      width: 300px;

      > label {
        display: block;
      }
    }
  </style>
</head>
<body>

  <form  id="addForm">
    <label>
      姓名: <input type="text" class="name">
    </label>
    <label>
      成绩: <input type="text" class="score">
    </label>
    <label>
      年龄: <input type="text" class="age">
    </label>
    <button>添加</button>
  </form>

  <div>
    <button>上一页</button>
    <span>1 / 1</span>
    <button>下一页</button>
  </div>

  <table border="1" cellspacing="0">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th class="sort_btn" data-type="id" data-method="ASC">ID</th>
        <th class="sort_btn" data-type="score" data-method="ASC">成绩</th>
        <th class="sort_btn" data-type="age" data-method="ASC">年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>1</td>
        <td>88</td>
        <td>18</td>
        <td>
          <button>修改</button>
          <button>删除</button>
        </td>
      </tr>
    </tbody>
  </table>

  <script>
    const list = [
      { id: (Math.random() + '').slice(2) - 0, name: 'Jack', age: 18, score: 90 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Rose', age: 24, score: 65 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Tom', age: 20, score: 99 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
      { id: (Math.random() + '').slice(2) - 0, name: 'Jerry', age: 22, score: 83 },
    ]

    // 0. 获取元素
    const tbody = document.querySelector('tbody')
    const div = document.querySelector('div')
    const nameInp = document.querySelector('.name')
    const ageInp = document.querySelector('.age')
    const scoreInp = document.querySelector('.score')

    // 0. 准备变量
    let current = 1
    let pagesize = 10
    let total = Math.ceil(list.length / pagesize)
    let sort_type = 'id'
    let sort_method = 'ASC' // DESC

    // 1. 渲染页面
    render()
    function render() {
      let bindList = list
      // 1-1. 截取数组
      bindList = list.slice((current - 1) * pagesize, current * pagesize)
      // 1-2. 排序
      bindList.sort((a, b) => {
        return sort_method === 'ASC' ? a[sort_type] - b[sort_type] : b[sort_type] - a[sort_type]
      })

      // 1-3. 渲染页面
      let str = ''
      bindList.forEach((item, index) => {
        str += `
          <tr>
            <td>${ index + 1 }</td>
            <td>${ item.name }</td>
            <td>${ item.id }</td>
            <td>${ item.score }</td>
            <td>${ item.age }</td>
            <td>
              <button>修改</button>
              <button class="del_btn" data-id="${ item.id }">删除</button>
            </td>
          </tr>
        `
      })
      tbody.innerHTML = str

      // 1-4. 计算总数
      total = Math.ceil(list.length / pagesize)

      // 1-5. 渲染分页器
      div.innerHTML = `
        <button class="prev_btn" ${ current <= 1 ? 'disabled' : '' }>上一页</button>
        <span>${ current } / ${ total }</span>
        <button class="next_btn" ${ current >= total ? 'disabled' : '' }>下一页</button>
      `
    }

    // 2. 事件委托
    document.body.onclick = function (e) {
      const { target } = e

      // 判断排序
      if (target.className === 'sort_btn') {
        list.sort((a, b) => target.dataset.method === 'ASC' ? a[target.dataset.type] - b[target.dataset.type] : b[target.dataset.type] - a[target.dataset.type])
        target.dataset.method = target.dataset.method === 'ASC' ? 'DESC' : 'ASC'
        sort_type = target.dataset.type
        sort_method = target.dataset.method
        render()
      }

      // 判断删除
      if (target.className === 'del_btn') {
        const id = e.target.dataset.id - 0
        const index = list.findIndex(item => item.id === id)
        list.splice(index, 1)
        render()
      }

      // 判断分页
      if (target.className === 'prev_btn') {
        current--
        render()
      }
      if (target.className === 'next_btn') {
        current++
        render()
      }
    }

    document.body.onsubmit = function (e) {
      e.preventDefault()
      const info = {
        id: ( Math.random() + '' ).slice(2) - 0,
        name: nameInp.value,
        age: ageInp.value - 0,
        score: scoreInp.value - 0
      }
      list.push(info)
      render()

      nameInp.value = ''
      ageInp.value = ''
      scoreInp.value = ''
    }
  </script>
</body>
</html>
